import { getFetch } from '@/utils/doFetch';
import { useRequest } from 'ahooks';
import {
    Avatar,
    Popover,
    Tooltip,
    theme,
    Input
} from 'antd';
import { useState } from 'react';
import { Scrollbars } from 'react-custom-scrollbars';
import Fade from 'react-reveal/Fade';
import './index.less';
import { SearchOutlined } from '@ant-design/icons';
import filterByPinyin from '@/utils/filterByPinyin';

const ChangeUser = ({ item, run, notooltip = false, nopopover = false }) => {
    const { token } = theme.useToken();
    const [open, setOpen] = useState(false);
    const [search, setSearch] = useState(null);
    const { data, runAsync } = useRequest(
        async () => {
            let res = await getFetch({ url: '/user', params: { projectId: item?.projectId } });
            return res?.data?.dataList ?? [];
        },
        {
            debounceWait: 200,
            manual: true,
            refreshDeps: [open],
        },
    );


    const content = (
        <div className='columns' style={{ width: 150, height: 200, overflow: 'hidden', margin: -12 }}>
            <div style={{ padding: 12, paddingBottom: 0 }}>
                <Input style={{ marginBottom: 6 }} placeholder='搜索用户' prefix={<SearchOutlined />} value={search} onChange={e => {
                    setSearch(e.target.value);
                }}></Input>
            </div>
            <div style={{ flex: 1, overflow: "hidden" }}>
                <Scrollbars
                    thumbMinSize={10}
                    autoHide
                    style={{
                        width: '100%',
                        height: '100%',
                    }}
                    hideTracksWhenNotNeeded
                >
                    <div style={{ padding: 12 }}>
                        {data?.filter(it => !search ? true : filterByPinyin(it.name, search)).map?.((it) => {
                            return (
                                <Fade bottom key={it?.id}>
                                    <div
                                        className="chooseitem"
                                        style={{
                                            '--color': token?.colorBgThird,
                                            color: item?.userId === it?.id ? '#fff' : token?.colorText,
                                            backgroundColor: item?.userId === it?.id ? token.colorPrimary : 'transparent',
                                        }}
                                        onClick={() => {
                                            run({
                                                url: '/item/' + item?.id,
                                                params: { userId: it?.id },
                                                method: 'PUT',
                                            });
                                        }}
                                    >
                                        <Avatar key={it?.id} src={it?.headUrl} size={'small'}></Avatar>
                                        <b>{it?.name}</b>
                                    </div>
                                </Fade>
                            );
                        })}
                    </div>
                </Scrollbars>
            </div>

        </div>
    );



    return (
        <div
            onClick={(e) => {
                e.stopPropagation();
            }}
            style={{ cursor: "pointer" }}
        >
            <Popover
                open={nopopover ? false : open}
                onOpenChange={setOpen}
                content={content}
                trigger={'click'}
                placement="bottomLeft"

            >
                {
                    notooltip ? <div className="center" style={{ gap: 6 }}>
                        <Avatar
                            size={'small'}
                            src={item?.userHeadUrl}
                            onClick={async (e) => {
                                await runAsync();
                            }}
                        >
                            {item?.userName?.charAt(0)}
                        </Avatar>
                        <span>
                            {item?.userName}
                        </span>
                    </div> : <Tooltip title={item?.userName}>
                        <Avatar
                            size={'small'}
                            src={item?.userHeadUrl}
                            onClick={async (e) => {
                                await runAsync();
                            }}
                        >
                            {item?.userName?.charAt(0)}
                        </Avatar>
                    </Tooltip>
                }

            </Popover>
        </div>
    );
};

export default ChangeUser;
